<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('弹窗选择器(多选)')}`">{{ $t('弹窗选择器(多选)') }}</t>
            <li>
                配置<span class="d-code">multiple</span>即可使该控件变为多选
            </li>
            <li>
                配置<span class="d-code">required</span>，则该控件在点击确认时会自动校验必须至少选择一条数据。
                另外请注意，与<span class="s-code">【Table】</span>一样，如果列表数据行内不存在
                <span class="s-code">"id"</span>，那么你需要通过<span class="s-code">row-key</span>指定列表行的唯一键
            </li>
            <li>当前已选择：<span class="s-code-gray">{{ selections.map(({ name }) => name).join('、') || '--' }}</span></li>
        </template>
        <el-button type="primary" @click="visible = true">点击打开弹窗选择器(多选)</el-button>
        <sib-table-picker
            title="弹窗选择器(多选)"
            row-key="rowId"
            multiple
            required
            v-model="visible"
            :search-config="searchConfig"
            :table-column="tableColumn"
            :table-data="tableData"
            @confirm="confirm">
        </sib-table-picker>
    </example>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const selections = ref([]);
        const visible = ref(false);

        return {
            visible,
            selections,
            searchConfig: {
                fields: [{ label: '姓名', code: 'name', type: 'text' }],
            },
            tableColumn: [
                { label: '姓名', code: 'name' },
                { label: '人员编码', code: 'code' },
            ],
            tableData: [
                { name: '张三', code: '001', rowId: '1' },
                { name: '李四', code: '002', rowId: '2' },
                { name: '王五', code: '003', rowId: '3' },
                { name: '奔跑的提款机', code: '666', rowId: '4' },
                { name: '前端爱好者', code: '004', rowId: '5' },
                { name: '菜鸟', code: '005', rowId: '6' },
                { name: '旗鼓相当的对手', code: '006', rowId: '7' },
            ],
            confirm(rows) {
                selections.value = rows;
            },
            templateString: `<template>
    <p>当前已选择：{{ selections.map(({ name }) => name).join('、') || '--' }}</p>
    <el-button type="primary" @click="visible = true">点击打开弹窗选择器(多选)</el-button>
    <sib-table-picker
        title="弹窗选择器(多选)"
        row-key="rowId"
        multiple
        required
        v-model="visible"
        :search-config="searchConfig"
        :table-column="tableColumn"
        :table-data="tableData"
        @confirm="confirm">
    </sib-table-picker>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const selections = ref([]);
        const visible = ref(false);

        return {
            visible,
            selections,
            searchConfig: {
                fields: [{ label: '姓名', code: 'name', type: 'text' }],
            },
            tableColumn: [
                { label: '姓名', code: 'name' },
                { label: '人员编码', code: 'code' },
            ],
            tableData: [
                { name: '张三', code: '001', rowId: '1' },
                { name: '李四', code: '002', rowId: '2' },
                { name: '王五', code: '003', rowId: '3' },
                { name: '奔跑的提款机', code: '666', rowId: '4' },
                { name: '前端爱好者', code: '004', rowId: '5' },
                { name: '菜鸟', code: '005', rowId: '6' },
                { name: '旗鼓相当的对手', code: '006', rowId: '7' },
            ],
            confirm(rows) {
                selections.value = rows;
            },
        };
    },
};
<\/script>`,
        };
    },
};
</script>
